<template>
  <div class="Rowcomponent w2 clearfix">
    <div class="left-box w3" :class="leftClass">
      <div>
        <ul>
          <slot name="top-bar"></slot>
        </ul>
      </div>
      <div class="tg-vedio-group" :class="groupClass">
        <slot name="video-slot"></slot>
      </div>
    </div>
    <div class="right-box w4">
      <slot name="right-area"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: ['leftClass', 'groupClass', 'rightClass'],
}
</script>
<style lang="less" scoped>
.left-box {
  float: left;
  margin-bottom: 40px;
}
.left-box ul {
  height: 50px;
}
.left-box li {
  float: left;
  font-size: 20px;
  line-height: 20px;
}
.left-box li a {
  color: #000;
  margin-left: 30px;
  transition: all 0.2s;
  font-size: 13px;
  line-height: 25px;
}
.left-box a:hover {
  color: #00a1d6;
}
.left-box li::before {
  font-size: 30px;
  margin-right: 5px;
  color: orange;
}
.left-box a::before {
  color: red;
  font-size: 18px;
  margin-right: 3px;
}
.right-box {
  margin-left: 20px;
  float: left;
  width: 320px;
}
.tg-vedio-group {
  overflow: hidden;
}
.tg-vedio {
  float: left;
  width: 206px;
  margin-left: 10px;
  margin-bottom: 20px;
}
.tg-vedio:nth-child(7) {
  margin-left: 0px;
}
.tg-vedio:first-child {
  margin-left: 0;
}
.video-fm {
  position: relative;
  width: 206px;
  height: 116px;
}
.tg-vedio img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1450px) {
  .tg-vedio {
    width: 170px;
  }
  .video-fm {
    width: 170px;
    height: 96px;
  }
}
</style>
